<template>
  <div>
    <h4>自定义指令案例</h4>
    <h5>
      点击切换导航栏tab页的样式，两种写法
    </h5>
    <div>
      <h5>(1) 动态修改类样式的写法</h5>
      <div class="nav-tab">
        <div
            v-for="(item, index) in items"
            :class="['nav-item', {'cur-item': curIdx1 === index}]"
            @click="handleNavItemClick1(index)"
        >
          {{item}}
        </div>
      </div>
    </div>

    <div>
      <h5>(2) 自定义指令写法</h5>
      <div class="nav-tab"
        v-nav-current="{
          curIdx: curIdx2,
          className: 'nav-item',
          activeClass: 'cur-item',
        }">
        <div
            class="nav-item"
            v-for="(item, index) in items"
            @click="handleNavItemClick2(index)"
        >
          {{item}}
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import navCurrent from '@/directives/navCurrent.js';

export default {
  name: "index",
  directives: {
    navCurrent
  },
  data() {
    return {
      curIdx1: 0,
      curIdx2: 0,
      items: [
          "选项1",
          "选项2",
          "选项3",
          "选项4",
      ]
    }
  },
  methods: {
    handleNavItemClick1(index) {
      this.curIdx1 = index;
    },
    handleNavItemClick2(index) {
      this.curIdx2 = index;
    }
  }
}
</script>

<style scoped>
  .nav-tab {
    width: 800px;
    height: 60px;
    border: 1px solid #bdbdbd;
    display: flex;
  }
  .nav-item {
    flex: 1;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
  }

  .cur-item {
    background-color: aqua;
    border: 2px solid #000;
  }

</style>